<template>
  <view class="SearchCard" v-if="item" @click="navTo(item)">
      <image
	    lazy-load
		mode="aspectFill"
        :src="item.img || item.note.image_u || item.photo_path"
		style="height: 100px; width:45%"
      ></image>
		<image class="play" src="/static/images/play.png" style="width: 30px;height: 30px;" v-if="item.media_type || item.vu || item.vfurl || false"></image>
      <view class="text">
          <view class="n">{{item.n || item.note.title || item.title}}</view>
          <view class="rate" v-if="!item.type">
              <text v-if="item.rate">{{item.rate}}分</text>
              <text>{{item.recommend_label}}</text>
          </view>
          <view class="tag" v-if="item.note">
              <text 
                v-for="(i,index) in item.recipe_list_tags" 
                :key="index"
                :style="{ color:i.text_color, 
                        background:`linear-gradient(to bottom, ${i.background_start_color} 0%, ${i.background_end_color} 100%)`}"
              >{{i.text}}</text>
          </view>
          <view class="author" v-if="item.note">
              <image 
                    :src="item.note.author.p"
                    style="width: 20px;height: 20px;border-radius: 50%;"
                ></image>
                <text>{{ item.note.author.n }}</text>
          </view>
		  <view class="author" v-else>
		      <image 
		            :src="item.a ? item.a.p : item.u.p"
		            style="width: 20px;height: 20px;border-radius: 50%;"
		        ></image>
		        <text>{{ item.a ? item.a.n : item.u.n}}</text>
		  </view>
		  <view class="author" v-if="item.as == 2">
		      <image 
		            :src="item.user.user_photo"
		            style="width: 20px;height: 20px;border-radius: 50%;"
		        ></image>
		        <text>{{ item.user.nickname}}</text>
		  </view>
      </view>
      <!-- <slot name="star"></slot> -->
  </view>
</template>

<script>
export default {
props:["item"],
data: function(){
    return{
        // fav:true,
    }
},
methods:{
	navTo(item){
		console.log(item);
		if(item.note){
			console.log(item.note.id)
			uni.navigateTo({
				url: "../../pages/NoteDeatil/NoteDeatil?id=" + item.note.id,
			});
		}
		else{
			console.log(item.cook_id);
			uni.navigateTo({
				url: "../../pages/MenuDetail/MenuDetail?id=" + (item.id || item.cook_id),
			});
		}
	}
     // nolove(){
     //    this.toast1();
     //    // this.fav = false;
     //  },
     //  toast1: function(){
     //    this.$toast({
     //      message: '取消收藏',
     //      position: 'bottom',
     //      className: "love",
     //    });
     // },
  }
}
</script>

<style lang="less" >

.SearchCard{
    height: 100px;
    margin: 15px 15px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    position: relative;
    .fav{
        position: absolute;
        bottom: 0;
        right: 0;
    }
    .play{
        position: absolute;
        top: 50%;
        left: 22%;
        transform: translate(-50%,-50%);
    }
    .van-image{
        // height: 100%;
        .van-image__img{
            border-radius: 5px;
        }
    }
    .text{
        margin-left: 10px;
        width: 50%;
        .n{
			height: 22px;
            display: block;
            white-space:nowrap;
            overflow: hidden;
            text-overflow:ellipsis;
            font-size: 15px;
        }
        .rate{
            font-size: 12px;
            text{
                &::after{
                    content: ' · ';
                    font-size: 20px;
                    vertical-align: middle;
                }
                &:last-child::after{
                    display: none;
                }
            }
        }
        .tag{
			// height: 44px;
            font-size: 10px;
            text{
                display: inline-block;
                transform: scale(0.8);
                padding: 3px;
                border-radius: 2px;
            }
        }
        .author{
            margin-top: 10px;
            font-size: 12px;
            color: #868585;
            display: flex;
            align-items: center;
            text{
                margin-left: 5px;
				display: block;
                white-space:nowrap;
                overflow: hidden;
                text-overflow:ellipsis;
            }
        }
    }
}
</style>